<template>
  <div class="home">
    <MdEditor :value="mdValue" :handle-change="onMDChange"/>
    <CodeEditor :value="codeValue" :handle-change="onCodeChange"/>
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
import MdEditor from "@/components/MdEditor.vue";
import CodeEditor from "@/components/CodeEditor.vue";
// export default {
//   components: {CodeEditor}
// }
 // @ is an alias to /src

const mdValue = ref();
const onMDChange = (v:string) => {
  mdValue.value = v;
}

const codeValue = ref();
const onCodeChange = (v:string) => {
  codeValue.value = v;
}

</script>
